<template>
  <div class="template-item">
    <span class="item-title" v-if="info.id !== 0">{{ info.id !== 0 && info.id ? '模板' : '暂未选择模板' }}</span>
    <div class="hw-box-style-flex" v-if="info.id">
      <div class="item-left">
        <t-image :src="urls + info.coverUrl" fit="cover" position="center" class="item-left-img" />
      </div>
      <div class="item-right">
        <span class="right-title1">{{ info.name }}</span>
        <!-- <span class="right-title2">模版指引</span> -->

        <div class="item-right-bottom">
          <a
            :href="doorUrl + 'portal/square?projectId=' + route.query.projectId"
            target="_blank"
            class="item-right-btn1"
            v-if="info.id == 0"
            @click="preview"
            ><span>模版设置</span></a
          >
          <a :href="editUlrs + route.query.projectId" target="_blank" class="item-right-btn2" @click="preview"
            ><span>预览</span></a
          >
          <a
            v-if="info.id !== 0"
            class="item-right-btn3"
            :href="doorUrl + 'portal/square?projectId=' + route.query.projectId"
            target="_blank"
          >
            <img src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/workIcon.png" alt="" />
            <span>去模版广场重选</span>
          </a>
        </div>
        <!-- <a
          :href="doorUrl + 'portal/square?projectId=' + route.query.projectId"
          target="_blank"
          class="right-title4 hw-flex-style-c-c hw-click-cursor"
        >
          <span>进入模版广场重选</span>
          <img src="../../../../../assets/img/projackList6.png" alt="" />
        </a> -->
      </div>
    </div>
    <div class="hw-box-style-flex is-null" v-else>
      <isNull title="暂未选择模板" />
      <!-- <a
        :href="doorUrl + 'portal/square?projectId=' + route.query.projectId"
        target="_blank"
        class="right-title4 hw-flex-style-c-c hw-click-cursor"
      >
        <span>进入模版广场选择</span>
        <img src="../../../../../assets/img/projackList6.png" alt="" />
      </a> -->
      <a class="item-right-btn4" :href="doorUrl + 'portal/square?projectId=' + route.query.projectId" target="_blank">
        <span style="margin-left: 0px">去模版广场重选</span>
        <img
          style="margin-left: 8px"
          src="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/workIcon.png"
          alt=""
        />
      </a>
    </div>
    <messageModel
      submitText="前往"
      title="提示"
      :visible="visibleMessage1"
      problem="您暂未选择模板"
      message="是否前往模板广场选择？"
      @closeClick="closeClick"
      @submitClick="pathSubmitClick"
    />
  </div>
</template>

<script setup lang="ts">
import { doorUrl, editUlrs } from '@/utils/minxin';
import isNull from '@/components/isnull/isNull.vue';
// @ts-nocheck <t-icon v-if="beIcon(item)" :name="item.icon" />
import proJackSvg from '../../../../../assets/img/projackList6.svg';
import { urls } from '@/utils/request/upload';
import { ref } from 'vue';
import { projectTemplate } from '@/api/templates/templates';
import { useRouter, useRoute } from 'vue-router';
import { pathSquare } from '@/utils/minxin';
import { configData } from '@/api/templates/templates';
import messageModel from '@/components/messageModel/index.vue';
import { useProjectStore } from '@/store';

const visibleMessage1 = ref(false);
const store = useProjectStore();
const router = useRouter();
const route = useRoute();
const info = ref({
  code: '',
  coverUrl: '',
  description: '进入模板广场选择模板即可进行布展设置',
  id: 0,
  mode: 0,
  name: '暂无模板',
});
const init = async () => {
  try {
    let { data } = await projectTemplate(localStorage.getItem('projectId'));
    if (data) {
      info.value = data;
    }
  } catch {}
};
init();

const preview = () => {
  // configData(localStorage.getItem('projectId')).then((res) => {
  //   if (res.statusCode == 200) {
  //     store.setstyleInfo(res.data);
  //     store.setTeplateType(0);
  //     if (res.data.id === 0 || !res.data.id) {
  //       visibleMessage1.value = true;
  //       return;
  //     }
  //     pathSquare(res.data.id);
  //   }
  // });
};
const closeClick = () => {
  //取消删除
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  let projectId = localStorage.getItem('projectId');
  let url = doorUrl + 'portal/square?projectId=' + projectId;
  window.open(url, '_blank');
  visibleMessage1.value = false;
};
</script>

<style lang="less" scoped>
.item-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-bottom: 8px;
}
.hw-box-style-flex {
  // margin-top: 16px;
}

.item-left {
  position: relative;
  width: 256px;
  height: 160px;
  border-radius: 6px;
  margin-right: 12px;
  .item-left-img {
    width: 256px;
    height: 160px;
    border-radius: 6px;
  }
}

.item-right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right-title1 {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
}
.item-right-bottom {
  display: flex;
}
.item-right-btn1,
.item-right-btn2,
.item-right-btn3 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e62b17;

  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 24px;
}
.item-right-btn4 {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e62b17;
  height: 36px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e62b17;
  line-height: 24px;
  border: 1px solid #e62b17;
  border-radius: 4px;
  padding: 0px 12px;
  img {
    width: 16px;
    height: 16px;
    // margin-right: 8px;
  }
}
.item-right-btn1 {
  margin-right: 12px;
  width: 100px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
}
.item-right-btn2 {
  margin-right: 12px;
  width: 68px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;
}
.item-right-btn3 {
  width: 172px;
  height: 36px;
  border-radius: 4px;
  border: 1px solid #e62b17;

  img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
  }
}
.item-right-btn1:hover,
.item-right-btn2:hover,
.item-right-btn3:hover {
  background: #ffece6;
}
.is-null {
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .null-box-style {
    padding: 0;
  }
}
</style>
